<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html5 clock</title>
  </head>
  <body>
    <div style="text-align: center;">
      <canvas id="clock" width="400" height="400"></canvas>
      <br>
      <br>
      <div>
        radius: <input id="radius" type="text" value="200" style="width: 30px;">px;
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button id="redraw">Redraw</button>
      </div>
    </div>
    <script>
      (() => {

        let el_clock = document.getElementById('clock');
        let el_radius = document.getElementById('radius');
        let el_redraw = document.getElementById('redraw');
        let ctx = el_clock.getContext('2d');
        let r = + el_radius.value;
        let width = 2 * r, height = 2 * r;
        ctx.canvas.width = width;
        ctx.canvas.height = height;
        let dpi = 2 * Math.PI;
        let rem = width / 200;

        let drawBackground = () => {
          ctx.translate(r, r);
          ctx.beginPath();
          ctx.lineWidth = 10 * rem;
          ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, dpi, false);
          ctx.stroke();

          let numArr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
          ctx.font = 18 * rem + 'px Arial';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          for (let [i, num] of numArr.entries()) {
            let radian = dpi / 12 * i;
            let x = Math.cos(radian) * (r - 30 * rem);
            let y = Math.sin(radian) * (r - 30 * rem);
            ctx.fillText(num, x, y);
          }

          for (let i = 0; i < 60; i++) {
            let radian = dpi / 60 * i;
            let x = Math.cos(radian) * (r - 16 * rem);
            let y = Math.sin(radian) * (r - 16 * rem);
            ctx.beginPath();
            if (i % 5 === 0) ctx.fillStyle = '#000';
            else ctx.fillStyle = '#ccc';
            ctx.arc(x, y, 2 * rem, 0, dpi, false);
            ctx.fill();
          }
        };

        let drawHourPointer = (hour, minute) => {
          ctx.save();
          ctx.beginPath();
          let radian = dpi / 12 * hour;
          let mradian = dpi / 12 / 60 * minute;
          ctx.rotate(radian + mradian);
          ctx.lineWidth = 6 * rem;
          ctx.lineCap = 'round';
          ctx.moveTo(0, 10 * rem);
          ctx.lineTo(0, -r / 2);
          ctx.stroke();
          ctx.restore();
        };

        let drawMinutePointer = (minute) => {
          ctx.save();
          ctx.beginPath();
          let radian = dpi / 60 * minute;
          ctx.rotate(radian);
          ctx.lineWidth = 4 * rem;
          ctx.lineCap = 'round';
          ctx.moveTo(0, 10 * rem);
          ctx.lineTo(0, -r + 30 * rem);
          ctx.stroke();
          ctx.restore();
        };

        let drawSecondPointer = (second) => {
          ctx.save();
          ctx.beginPath();
          let radian = dpi / 60 * second;
          ctx.rotate(radian);
          ctx.moveTo(-2 * rem, 20 * rem);
          ctx.lineTo(2 * rem, 20 * rem);
          ctx.lineTo(1, -r + 18 * rem);
          ctx.lineTo(-1, -r + 18 * rem);
          ctx.fillStyle = '#c14543';
          ctx.fill();
          ctx.restore();
        };

        let drawPointerDot = () => {
          ctx.beginPath();
          ctx.arc(0, 0, 3 * rem, 0, dpi, false);
          ctx.fillStyle = '#fff';
          ctx.fill();
        };

        let draw = () => {
          let curDate = new Date(), hours = curDate.getHours(), minutes = curDate.getMinutes(), seconds = curDate.getSeconds();
          ctx.clearRect(0, 0, width, height);
          ctx.save();
          drawBackground();
          drawHourPointer(hours, minutes);
          drawMinutePointer(minutes);
          drawSecondPointer(seconds);
          drawPointerDot();
          ctx.restore();
        };

        let redraw = () => {
          r = + el_radius.value;
          width = 2 * r;
          height = 2 * r;
          ctx.canvas.width = width;
          ctx.canvas.height = height;
          rem = width / 200;
          draw();
        };

        el_radius.addEventListener('keypress', (ev) => {
          if (ev.keyCode === 13) redraw();
        });

        el_redraw.addEventListener('click', () => {
          redraw();
        });

        draw();

        window.setInterval(draw, 1000);

      })();
    </script>
  
  </body>
</html>